@charset "utf-8";
@import 'reset';

body {
    background-color: #F1F3F4;
}

.tabber {
    position: relative;

}

header {
    width: 100vw;
    height: 11.2vw;
    background-color: white;

    h3 {
        font-size: 16px;
        text-align: center;
        line-height: 11.2vw;
        font-weight: 600;

    }
}

main {
    margin: 2.6667vw auto;
    border-radius: 2%;
    background-color: white;
    height: 50vw;
    width: 94.6667vw;
    margin-bottom: 2.4vw;

    div {
        display: flex;
        align-items: center;
        height: 12.8667vw;
        justify-content: space-between;




        &:first-child {
            height: 9.8667vw;
        }



        span {
            margin-left: 2.6667vw;
        }

        p {
            margin-right: 5.0667vw;
        }

    }
}


.frame {
    height: 1px;
    width: 87.3333vw;
    background-color: #F1F3F4;
    margin-left: 2.6667vw;
}

.content {
    div {
        height: 15.5733vw;
        width: 100vw;
        background-color: white;
        border-bottom: .2667vw solid gainsboro;
        display: flex;
        align-items: center;
        font-size: 600;

        &:first-child {
            height: 16.2667vw;
            font-weight: 600;
        }

        p {
            margin-left: 2.6667vw;

        }
    }
}

.dotted-line {
    height: 10px;
    width: 87.8vw;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 49.3333vw;
    margin-left: 4.5vw;



    .parallel {

        margin-left: 4px;
        width: 16px;
        height: 2px;
        background: orange;
        transform: skew(20deg, 0);

        &:nth-of-type(even) {
            background-color: gray;
        }
    }

}